<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1px">
        <tr>
            <td>
                姓名
            </td>
            <td id="name_td"></td>
        </tr>
        <tr>
            <td>
               年龄
            </td>
            <td id="age_td"></td>
        </tr>
        <tr>
            <td>朋友</td>
            <td id="friend_td"></td>
        </tr>
    </table>
    <input type="button" value="加载数据" onclick="fun1()">
<script>
   
    function fun1() {
        const p = {
            name: 'tom', age: 19, friends: ['张学友', '刘德华']
        };
        const name = document.getElementById('name_td');
        const age = document.getElementById('age_td');
        const friends = document.getElementById('friend_td');
        name.innerHTML = p.name;
        age.innerHTML = p.age;
        const ul = document.createElement('ul');
        p.friends.forEach((item) => {
            const li = document.createElement('li');
            li.innerHTML = item;
            ul.appendChild(li);
        })
        friends.appendChild(ul);
    }
</script>
</body>
</html>